<script setup>
import { InitComponentData } from 'common-list'
import { Demo } from "../models/index";
import Sliders from "@/components/Slider.vue";
import Card from '@/components/Card.vue';
import { DemoColumns } from '../models/columndata';
import {computed, ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter();
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();

//list
let label
const getfId=ref(0);
const filterList=computed(()=>{
  if (getfId.value===0){
    return courses.value;
  }else {
    return courses.value.filter(item=>item.classId===getfId.value)
  }
});
import img1 from '@/assets/img/co1.jpg'
import img2 from '@/assets/img/co2.png'
import img3 from '@/assets/img/co3.png'
import img4 from '@/assets/img/co4.jpg'
import img5 from '@/assets/img/co5.png'
import img6 from '@/assets/img/co6.jpg'
import img7 from '@/assets/img/co7.jpg'
import img8 from '@/assets/img/co8.jpg'
import request from "@/utils/request.js";
const courses = ref([
  // 示例课程数据
  { id:1,name: 'v圈历史学', intro: '带您详细了解v圈历史', startTime: '9:00', endTime: '10:30', imgUrl:img1,classId:1},
  { id:2,name: '游戏历史学', intro: '带您详细了解游戏历史', startTime: '9:00', endTime: '10:30',imgUrl:img2,classId:1},
  { id:3,name: 'lolm极地大乱斗理论与实践', intro: 'lolm极地大乱斗理论与实践', startTime: '9:00', endTime: '10:30',imgUrl:img3,classId:2},
  { id:4,name: '怪物猎人太刀基础到进阶', intro: '怪物猎人太刀基础到进阶', startTime: '9:00', endTime: '10:30',imgUrl:img4,classId:2},
  { id:5,name: '英雄联盟从白银到大师——混子的自我修养', intro: '英雄联盟从白银到大师——混子的自我修养', startTime: '9:00', endTime: '10:30',imgUrl:img5,classId:3},
  { id:6,name: '王者荣耀从入门到精通——新手到高手的全攻略', intro: '王者荣耀从入门到精通——新手到高手的全攻略', startTime: '9:00', endTime: '10:30',imgUrl:img6,classId:2},
  { id:7,name: '绝地求生：全军出击——新手到高手的全攻略', intro: '绝地求生：全军出击——新手到高手的全攻略', startTime: '9:00', endTime: '10:30',imgUrl:img7,classId:3},
  { id:8,name: '刀塔传奇——从零开始的魔幻冒险', intro: '刀塔传奇——从零开始的魔幻冒险', startTime: '9:00', endTime: '10:30',imgUrl:img8,classId:3}
]);
function load(){
  // fetch("http://127.0.0.1:9090/course/list").then(res => res.json()).then(res => {
  //   res.data.forEach(item=>{
  //     item.imgUrl="http://127.0.0.1:9090/"+item.imgUrl;
  //   })
  //   console.log(res.data);
  //   courses.value=res.data;
  request.get('/course/page').then(res => {
    console.log(res.data);
    courses.value=res.data.content;
  })
}
onMounted(()=>{
  load();
})
// const teacherList = [
//   // 示例教师数据
//   { name: 'Teio', intro: '原名龟田太郎,日本游戏界不知名游戏设计师，怪物猎人太刀使用者，' },
// ]
// 注册子组件
defineExpose({

});
function tocontrol(){
   router.push('/control');
}
function goToLogin() {
  router.push('/login');
}
function goText() {
  router.push('/administration/studygroup');
}
function quit() {
  userStore.reset();
}
function goToPersonal() {
  router.push('/personal');
}
// function goToCourseDetail(index) {
//   console.log(index);
//   console.log(courses.value[index]);
//   const params = { name: courses.value[index].name,intro:courses.value[index].intro,imgUrl:courses.value[index].imgUrl,startTime:courses.value[index].startTime,endTime:courses.value[index].endTime};
//   const query = { page: 'home' };
//   router.push({
//     name: 'CourseDetail',
//     params: params,
//     query: query
//   });
// }
//api
// import{fetchData} from "@/api/index.ts";
// function getData() {
//   console.log(fetchData());
// }
// const curriculumData = ref([]); // 初始化为空数组
// const isLoading = ref(true);
// const error = ref(null);
// onMounted(async () => {
//   try {
//     const responseData = await fetchData();
//     curriculumData.value = responseData; // 假设 responseData 是课程数据的数组
//     isLoading.value = false;
//   } catch (err) {
//     error.value = err.message; // 获取错误消息
//     isLoading.value = false;
//   }
// });

</script>
<template>
  <el-row class="index-container" align="center" justify="space-between">
    <el-col :span="24" class="grid-container">
      <div class="grid-content ep-bg-purple-dark">让您孩子的学习再次伟大！</div>


      <div class="user-info" v-if="userStore.pass">
        <div style="display: flex; align-items: center">
          <el-popover
              :width="300"
          >
            <template #reference>
              <el-avatar src='src/assets/img/teacher/1.jpg' />
            </template>
            <template #default>
              <div style="display: flex ;margin-bottom: 10px" >
                <el-avatar
                    src="src/assets/img/teacher/1.jpg" size="large"
                />
                <h3 style="margin-left: 10px">22002362</h3>
                <h3 style="margin-left: 4px">东海帝皇</h3>
              </div>
              <el-button type="primary" plain @click="goToPersonal">成绩管理</el-button>
              <el-button type="primary" plain @click="tocontrol">管理界面</el-button>
              <el-card style="width: 260px;margin-bottom: 10px; margin-top: 20px" shadow="always" >通知栏</el-card>
              <el-button type="primary" plain @click="goToLogin" >退出登陆</el-button>
            </template>
          </el-popover>
        </div>
      </div>
      <div v-else  class="login-btn" @click="goToLogin">登录</div>
    </el-col>
  </el-row>
  <div  class="login-btn" @click="goText">测试</div>

  <div>
    <Sliders/>
  </div>
  <div class="course-list">
    <div class="label">
      <el-radio-group v-model="getfId">
        <el-radio :label="0">全部课程</el-radio>
        <el-radio :label="1">历史</el-radio>
        <el-radio :label="2">手游</el-radio>
        <el-radio :label="3">端游</el-radio>
      </el-radio-group>
    </div>
    <div class="course-list-container">
      <Card
          v-for="(course, index) in filterList"
          :key="index"
          :course="course"
      />
    </div>
  </div>
  <div class="teacher-list">
    <div class="label">
      <h2>授课教师</h2>
    </div>
    <div class="teacher-list-container"  :key="index">
      <div class="teacher-avatar">
        <img src="@/assets/img/teacher/a23.jpg" alt="">
      </div>
      <div class="teacher-info">
        <h3>灰白影片</h3>
        <p>lol一区大师第一人,著名科杂krd,loli爱好者,galgame高手,ai绘画大魔导师,1660super持有者</p>
      </div>
    </div>
    <div class="teacher-list-container"  :key="index">
        <div class="teacher-avatar">
          <img src="@/assets/img/teacher/1.jpg" alt="">
        </div>
        <div class="teacher-info">
          <h3>Teio</h3>
          <p>原名龟田太郎,日本游戏界不知名游戏设计师，怪物猎人太刀使用者，lolm乱斗混子，游戏历史学者，bilibili6级会员，抗压吧黄牌，云顶之弈高手，东方高手，目前正在制作成人级三消游戏</p>
        </div>
        </div>
    <div class="teacher-list-container"  :key="index">
      <div class="teacher-avatar">
        <img src="@/assets/img/teacher/2.jpg" alt="">
      </div>
      <div class="teacher-info">
        <h3>Xky</h3>
        <p>怪物猎人大锤使用者，传火者</p>
      </div>
    </div>
  </div>
  <div>
    <div v-if="isLoading">Loading...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else>
      <div v-for="item in curriculumData" :key="item.id">
        {{ item}}
      </div>
    </div>
    <a href="https://www.bilibili.com/video/BV1MJ4m1J71F/">视频讲解</a>
    <a href=" https://gitee.com/konglired/mhwcommit-list">仓库地址</a>
  </div>
</template>




<style scoped>
.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  right: 10%;
  font-size: 1.5rem;

}
.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 10px;
}
.grid-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
}
.index-container {
  border-bottom: 1px solid #e6e6e6;
  padding: 20px;
  position: relative;
  align-items: center;
  justify-content: center;
}
.login-btn {
  width: 5%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #409eff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  right: 10%;
}
.login-btn:hover {
  background-color: #66b1ff;
  transition: all 0.3s;
}
.login-btn:active {
  background-color: #3a8ee6;
  transition: all 0.3s;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
  font-family: "simhei";
  font-size: 2rem;
  margin: 10px 0;
}
.label{
  margin: 10px;
}
.course-list{
  width: 80%;
  border: 1px solid #e6e6e6;
  padding: 20px;
  /* 添加阴影效果 */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1); /* 你可以根据需要调整阴影的值 */
  /* 添加圆角效果 */
  border-radius: 10px; /* 你可以根据需要调整圆角的值 */
  margin: 10px auto;
  background-color: #fff;

}
.course-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: start;
  margin-top: 20px;


}
.teacher-avatar>img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 10px;
}
.teacher-list{
  width: 80%;
  border: 1px solid #e6e6e6;
  padding: 20px;
  /* 添加阴影效果 */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1); /* 你可以根据需要调整阴影的值 */
  /* 添加圆角效果 */
  border-radius: 10px; /* 你可以根据需要调整圆角的值 */
  margin: 10px auto;
  background-color: #fff;


}
.teacher-list-container {
  display: flex;
  align-items: center;
  padding: 10px;
  ;
}
.teacher-item {
  width: 30%;
  margin-bottom: 20px;
}
.teacher-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px
}

</style>